<template>
<div class="nickname">
  <van-nav-bar
    title="修改称呼"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-field v-model="state.text" placeholder="请输入您的称呼"  />
  <p>好名字可以让您的生意伙伴更容易记住您哦 。</p>
  <van-button round type="primary" @click='fn'>完成</van-button>
</div>

</template>

<script>
import router from "../../router/index.js"
import {ref} from "vue"
export default {
  setup() {
    //左侧返回上一层按钮
    const onClickLeft = () => {
      router.go(-1)
    };
    
    const state = ref({
      text: '',
    });
    //点击完成触发的事件
    const fn=()=>{
      console.log(state.value.text);
      //post请求需要传的数据
      let obj={};
      obj.token=window.localStorage.getItem("token");
      obj.user_nickname=state.value.text;
      //发送post请求
      if(window.confirm('确定修改昵称?')){
      fetch('http://www.pudge.wang:5000/api/users/update',{
        method:'POST',
        headers:{
      　　'Content-Type': 'application/json;charset=utf-8'
      　　},
       body:JSON.stringify(obj)
      }).then(response=>response.json()).then(res=>{
        alert(res.msg)
        //跳转回个人信息页
        router.push('/information')
      })}
    }
    
    return {
      onClickLeft,
      state,
      fn
    };
  },
};
</script>
<style>
.nickname .van-cell{
  background-color: #f6f6f6;
  margin-top: 40px;
  width: 80%;
  margin-left: 10%;
  height: 50px;
  border-radius: 25px;
}
.nickname .van-cell input{
  text-align: center;
}
.nickname p{
  font-size: 12px;
  text-align: center;
  color: #747474;
}
.nickname .van-button {
  width: 60%;
  margin-top: 50px;
  margin-left: 20%;
  background-color: #4cc79b;
  border: none;
}
</style>
